<template>

	<div class="page-navbar">
		<common-header :tittle="tittle" :showmore="false" :isshow="isShow"></common-header>
		<!-- navbar -->
		<mt-navbar class="page-part" v-model="selected">
			<mt-tab-item id="1">视频</mt-tab-item>
			<mt-tab-item id="2">人物</mt-tab-item>
			<mt-tab-item id="3">专题</mt-tab-item>
			<mt-tab-item id="4">体验</mt-tab-item>

		</mt-navbar>

		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<!--刷新-->

			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<!--加载-->
				<mt-tab-container v-model="selected">
					<!-- 1 -->
					<mt-tab-container-item id="1">
						<!-- 视频 -->
						<div class="palyer" v-for="item in playerList" :key="item.id">
							<h3 v-text="item.title"></h3>
							<div class="dplayer">
								<router-link to="">
									<img :src="item.imgSrc" alt="">
								</router-link>
							</div>
							<p>
								<span v-text="item.type" v-show="item.status==1"></span>
								<span v-text="item.type" v-show="item.status==2"></span>
								<span v-text="item.type" v-show="item.status==3"></span>
								<span v-text="item.type" v-show="item.status==4"></span>

								<span v-text="item.num"></span></p>
						</div>
					</mt-tab-container-item>

					<!-- 2 -->
					<mt-tab-container-item id="2">
						<!-- 人物 -->
						<div v-for="item in items" :key="item.id" :id="item.id">
							<div class="latestContents">

								<div class="content">
									<div class="nav-l">
										<p class="unfold">{{item.description | filterFun}}</p>
										<p><span v-text="item.category_name"></span><span v-text="item.category_id"></span></p>
									</div>
									<div class="nav-r">
										<img :src="item.cover_img" alt="">
									</div>
								</div>
							</div>

							<!-- 三张图模块 -->
							<div class="threePic">
								<h3 v-text="item.contitle"></h3>
								<div class="imglist">
									<span>
									<img :src="item.cover_img" alt="">
								</span>
									<span>
									<img :src="item.cover_img2" alt="">
								</span>
									<span>
									<img :src="item.cover_img3" alt="">
								</span>
								</div>
								<p class="experience">
									<span v-text="item.source"></span>
									<span v-text="item.viewview"></span>
								</p>
							</div>
						</div>

					</mt-tab-container-item>

					<!-- 3 -->
					<mt-tab-container-item id="3">
						<!-- 专题-->
						<div v-for="item in special" :key="item.id" :id="item.id">
							<div class="latestContents">

								<div class="content">
									<div class="nav-l">
										<p class="unfold">{{item.description | filterFun}}</p>
										<p><span v-text="item.category_name"></span><span v-text="item.category_id"></span></p>
									</div>
									<div class="nav-r">
										<img :src="item.cover_img" alt="">
									</div>
								</div>
							</div>

							<!-- 三张图模块 -->
							<div class="threePic">
								<h3 v-text="item.contitle"></h3>
								<div class="imglist">
									<span>
									<img :src="item.cover_img" alt="">
								</span>
									<span>
									<img :src="item.cover_img2" alt="">
								</span>
									<span>
									<img :src="item.cover_img3" alt="">
								</span>
								</div>
								<p class="experience">
									<span v-text="item.source"></span>
									<span v-text="item.viewview"></span>
								</p>
							</div>
						</div>
					</mt-tab-container-item>

					<!-- 4 -->

					<mt-tab-container-item id="4">
						<!-- 体验 -->
						<div v-for="item in experience" :key="item.id" :id="item.id">
							<div class="latestContents">

								<div class="content">
									<div class="nav-l">
										<p class="unfold">{{item.description | filterFun}}</p>
										<p><span v-text="item.category_name"></span><span v-text="item.category_id"></span></p>
									</div>
									<div class="nav-r">
										<img :src="item.cover_img" alt="">
									</div>
								</div>
							</div>

							<!-- 三张图模块 -->
							<div class="threePic">
								<h3 v-text="item.contitle"></h3>
								<div class="imglist">
									<span>
									<img :src="item.cover_img" alt="">
								</span>
									<span>
									<img :src="item.cover_img2" alt="">
								</span>
									<span>
									<img :src="item.cover_img3" alt="">
								</span>
								</div>
								<p class="experience">
									<span v-text="item.source"></span>
									<span v-text="item.viewview"></span>
								</p>
							</div>
						</div>
					</mt-tab-container-item>

				</mt-tab-container>
			</van-list>
		</van-pull-refresh>
	</div>
	</div>

</template>

<script>
	import { List, PullRefresh } from 'vant';
	import commonHeader from 'common/common-header-smallblack'
	export default {
		name: "page-navbar",
		data() {
			return {
				//				list: [],
				loading: false,
				finished: false,
				isShow: true,
				tittle: '',
				data: 0,
				selected: '1',
				playerList: [],
				items: [],
				special: [],
				experience: [],
				page: 1,
				isLoading: false //刷新
			}
		},
		components: {
			commonHeader
		},
		//管道-字符串截取
		filters: {
			filterFun: function(value) {
				if(value && value.length > 30) {
					value = value.substring(0, 30) + '...';
				}
				return value;
			}
		},
		computed: {
			newdata: function() {
				return this.data + 1
			}
		},
		mounted() {
			this.playerLists(),
				this.people(),
				this.specials(),
				this.experiences()
		},
		filters: {
			filterFun: function(value) {
				if(value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
		methods: {

			add() {
				this.data++
			},

			//视频接口请求
			playerLists: function() {
				this.$axios.get('API/v1/videos').then((res) => {
					if(res) {
						//						console.log(JSON.stringify(res))

					} else {

					}

				})
			},

			//人物
			people: function(page) {
				console.log(page)
				this.$axios.get('API/v1/profiles', {
						params: {
							p: page,
							fields: 'id,title,keywords,description,cover_img,listlayout,status,add_time'
						}
					})
					.then((res) => {
						if(res) {
							//@处理更多列表数据
							let list = res.data.data.items;
							res.data.data.items.forEach((val, i) => {
								this.items.push(list[i]);
							})
							this.page++;
							if(list <= 10) {
								this.finished = true;
							} else {
								this.finished = false;
							}
							this.loading = false;

						} else {

						}

					})
			},

			//专题
			specials: function() {
				this.$axios.get('API/v1/subjects').then((res) => {
					if(res) {
						//						console.log(JSON.stringify(res))
						this.special = res.data.data.items;
					} else {

					}

				})
			},

			experiences: function() {
				this.$axios.get('API/v1/tastes').then((res) => {
					if(res) {
						//						console.log(JSON.stringify(res))
						this.experience = res.data.data.items;
					} else {

					}

				})
			},
			//刷新
			onRefresh() {
				setTimeout(() => {
					this.page = 1;
					this.people(this.page)
					this.$toast('刷新成功');
					this.isLoading = false;
				}, 500);
			},
			//上拉加载
			onLoad() {
				setTimeout(() => {
					this.page++;
					this.people(this.page)
					this.loading = false;
				}, 300);
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.header-box {
		z-index: 999;
	}
	
	// 视频
	.page-navbar {
		background: #fff;
	}
	
	.mint-tab-item-label {
		font-size: 15px !important;
	}
	
	.page-part {
		z-index: 998;
		padding: 0 50px;
		border-bottom: 1px solid @border-color;
		margin-bottom: 20px;
		top: 0;
		justify-content: space-between;
		width: calc(100% - 50px);
		font-size: 15px;
		color: @base-sp-text-color;
	}
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 2px solid @base-blue-color;
		color: @base-blue-color;
		margin-bottom: 0px !important;
	}
	
	.palyer {
		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 10px 0 20px 10px;
			background: #ffffff;
		}
		.dplayer {
			width: calc(100% - 20px);
			height: 150px;
			margin: 0 10px;
			img {
				border-radius: 5px;
				width: 100%;
				height: 100%
			}
		}
		p {
			display: flex;
			padding: 0 10px;
			justify-content: space-between;
			width: calc(100% - 20px);
			color: #CCCCCC;
			margin-top: 18px;
			span {
				&:last-child {
					position: relative;
					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../../..//assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;
					}
				}
			}
		}
	}
	
	// 人物
	.latestContents {
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 20px 0 20px 10px;
			position: relative;
		}
		.content {
			font-size: 14px;
			padding: 10px 10px;
			display: flex;
			border-bottom: 1px solid @border-color;
			justify-content: space-between;
			.nav-l {
				text-align: left;
				.unfold {
					height: 50px;
					overflow: hidden;
				}
				p {
					&:first-child {
						line-height: 25px;
					}
					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						display: flex;
						justify-content: space-between;
						color: #CCCCCC;
						span {
							&:last-child {
								position: relative;
								&:after {
									position: absolute;
									content: '';
									width: 16px;
									height: 16px;
									left: -20px;
									top: -1px;
									background: url(../../../..//assets/imgs/eye.svg);
									background-size: 100% 100%;
									vertical-align: middle;
								}
							}
						}
					}
				}
			}
			.nav-r {
				margin-left: 25px;
				height: 75px;
				border-radius: 5px;
				img {
					width: 111px;
					height: 73px;
					border-radius: 5px;
				}
			}
		}
	}
	
	// 三张图模块
	.threePic {
		background: #ffffff;
		width: calc(100% - 10px);
		border-bottom: 1px solid @border-color;
		padding: 0 5px;
		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 20px 0 20px 10px;
			background: #ffffff;
		}
		.imglist {
			background: #ffffff;
			height: 75px;
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-end;
			span {
				margin: 0 5px;
				text-align: center;
				width: 100%;
				display: inline-block;
				display: inline-block;
				img {
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
		}
		.experience {
			margin: 18px 10px;
			display: flex;
			justify-content: space-between;
			color: #cccccc;
			span {
				&:last-child {
					position: relative;
					top: 2px;
					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../../..//assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;
					}
				}
			}
		}
	}
	
	.header-box {
		z-index: 999;
		height: 44px !important;
	}
	
	.header-box .left-icon {
		border-bottom: 1px solid #E5E5E5;
	}
</style>